<!--
 * @Author: zls 3292844045@qq.com
 * @Date: 2022-05-26 13:55:00
 * @LastEditors: zls 3292844045@qq.com
 * @LastEditTime: 2022-05-26 22:30:47
 * @FilePath: \CUCCL\html\cart.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/font_3418519_67alwcgubot.css"
    />
    <link rel="stylesheet" href="../css/main_css/cart/cart.min.css" />
    <link rel="stylesheet" href="../css/init_css/reset.css" />
    <link rel="stylesheet" href="../css/main_css/main.css" />
    <!-- <link rel="stylesheet" href="../css/female_cloths/female_cloths.css" /> -->
    <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <!-- 头部部分 -->
    <header class="splice-header">
      <div class="splice-container header-transparent">
        <nav class="splice-navbar">
          <!-- logo部分 -->
          <div class="splice-navbar-top">
            <!-- 三部分, 左侧 中间 右侧 -->
            <div class="splice-navbar-left">
              <ul>
                <li>
                  <a href="">
                    <i
                      class="iconfont icon-wxbdingwei"
                      style="opacity: 0.5"
                    ></i>
                    <span>配送至：</span>
                    <span>中国大陆地区</span>
                  </a>
                  <!-- 鼠标滑过显示下方隐藏的div -->
                  <!-- <div class="splice-sub-menu splic-sub-menu-hidden">
                          <h6>网上商城</h6>
                          <p>请注意，在浏览过程中更改您的位置将会清除购物袋中的所有商品。</p>
                      </div> -->
                </li>
                <li>
                  <a href="">
                    <span>客户服务</span>
                  </a>
                </li>
                <li>
                  <a href="">
                    <i class="iconfont icon-dianhua"></i>
                    <span>400.8210.582</span>
                  </a>
                </li>
              </ul>
            </div>

            <div class="splice-navbar-right">
              <a class="login">登录</a>
              <!-- //心愿单 -->
              <a href="" class="splice-nav-savedItems">
                <i class="iconfont icon-icon"></i>
              </a>
              <!-- 购物车 -->
              <a href="" class="shopping-cart">
                <i class="iconfont icon-gouwudai"></i>
                <span>购物车</span>
              </a>

              <!-- //搜索框 -->
              <a class="header-search"> </a>
            </div>
            <div class="splice-navbar-logo">
              <a href="https://www.gucci.cn/zh/">
                <img
                  src="https://res.gucci.cn/images/common/gucci-logo@2x.png"
                  alt="GUCCI"
                />
              </a>
            </div>
          </div>
          <!-- logo下面菜单 -->
          <div class="splice-navbar-menu">
            <ul class="splice-nav">
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">全球资讯</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">手袋</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="./female.html">
                  <span class="navtitletxt">女士</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">男士</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">童装</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">礼品</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">珠宝和腕表</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">美妆</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">生活和艺术</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </header>

    <!-- 中间部分 -->
    <section>
      <!-- 上面的大图片 -->
      <div class="top_big_img">
        <div class="big_img">
          <img
            src="https://res.gucci.cn/resources/other-page/HeroShoppingBagEmptyStandard_S21-Aria_001_Default.png?20220521020317471"
            alt=""
          />
        </div>
        <div class="big_img_content">
          <h4>gucci</h4>
          <h2>购物袋</h2>
        </div>
      </div>

      <!-- 购物车部分 -->
      <div class="cart">
        <div class="cart_main">
          <!-- 左边 -->
          <div class="cart_left">
            <div class="check_all">
              <input type="checkbox" class="check_all_box" />
              <span>全选</span>
              <button class="delete_checked">删除选中</button>
            </div>
            <ul class="goods_list">
              <!-- <li>
                          <div class="check_one">
                              <input type="checkbox">
                          </div>
                          <div class="goods_img">
                              <img src="https://res.gucci.cn/resources/2022/5/13/16524213140933238_ts_470X470.png" alt="">
                          </div>
                          <div class="goods_info">
                              <div class="goods_info_top">
                                  <h3>GG针织提花连衣裙</h3>
                                  <p>款号# 695735XJECY9185</p>
                                  <p>款式： 白色</p>
                                  <p>尺码： XS</p>
                              </div>
                              <div class="goods_info_sale_info">
                                  <p>预售</p>
                                  <p class="time">将受实际库存影响，预计5-6周左右发货</p>
                              </div> -->

              <!-- 下面删除 -->
              <!-- <div class="goods_opra">
                                  <span class="change">
                                      <span>编辑</span>
                                  </span>
                                  <span class="wash">
                                      <i class="iconfont icon-aixin"></i>
                                      <span>加入心愿单</span>
                                  </span>
                                  <span class="delete">删除</span>
                              </div>
                          </div>
                          
                        <div class="num_price">
                            <div class="num_content">
                                <div class="box_num">
                                    <span class="num_sub">-</span>
                                    数量
                                    <span class="num">1</span>
                                    <span class="num_add">+</span>
                                </div>
                            </div>
                            <div class="prices_content">
                                <div class="prices_box">
                                    ￥<span>9300</span>
                                </div>
                                
                            </div>
                        </div>
                         
                      </li> -->
            </ul>
          </div>
          <!-- 右边 -->
          <div class="cart_right">
            <!-- 订单小计 -->
            <div class="goods_num">
              <div>订单小计</div>
              <div class="nums_conent">
                已选
                <span class="all_nums">0</span>
                件商品
              </div>
            </div>
            <div class="good_prices_all">
              <div class="goods_prices_content">
                <div>商品总计</div>
                <div class="prices_content">
                  ￥
                  <span class="goods_prices">0</span>
                </div>
              </div>
              <div class="freight">
                <div>运费</div>
                <div class="freight_prices">
                  <span class="">免费</span>
                </div>
              </div>
              <div class="total">
                <div>总计</div>
                <div class="total_content">
                  ￥
                  <span class="totel_prices">0</span>
                </div>
              </div>
            </div>

            <div class="describe">
              <p>说明</p>
              <div>
                在线支付订单提交之后15分钟内未付款，订单将被系统自动取消，请您尽快完成支付以确保商品能及时送达，有货商品和门店配货商品是分开寄出
              </div>
            </div>

            <div class="balance">
              <div class="settle">立即结算</div>
              <div class="continue">继续购物</div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 尾部 -->
    <footer class="splice_footer">
      <!-- 尾部主体 -->
      <div class="splice_container">
        <!-- 返回顶部 -->
        <!-- <div class="splice_back_top">
        <i class="iconfont icon-xiangshangjiantou"></i>
        </div> -->
        <!-- 尾部内容 -->
        <div class="splice_footer_content">
          <!-- 左边 -->
          <div class="splice_footer_left">
            <ul>
              <!-- 免费服务 -->
              <li class="spice_exclusive_service">
                <div class="spice_footer_title">
                  <span>专属服务</span>
                </div>
                <ul class="spice_all">
                  <li><span>免费标准配送</span></li>
                  <li><span>免费礼品包装</span></li>
                  <li><span>预约门店服务</span></li>
                </ul>
              </li>
              <!-- 购买帮助 -->
              <li class="spice_shoping_help">
                <div class="spice_footer_title">
                  <span>购物帮忙</span>
                </div>
                <ul>
                  <li>
                    <a href="">
                      <span>支付相关</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>配送</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>退换货</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>发票</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>保养与维修</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 关于公司 -->
              <li class="spice_about_company">
                <div class="spice_footer_title">
                  <span>关于公司</span>
                </div>

                <ul>
                  <li>
                    <a href="">
                      <span>关于GUCCI</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>GUCCI EQUILIBRIUM</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>道德规范</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>职业发展</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>细则及条款</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>隐私与COOKIE</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>企业信息</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 联系方式 -->
              <li class="spice_follow_gucci">
                <div class="spice_footer_title">
                  <span>关注GUCCI</span>
                </div>
                <ul>
                  <li>
                    <a href="">
                      <span>微信</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>微博</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>抖音</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>腾讯视频</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>小红书</span>
                    </a>
                  </li>

                  <li class="slice_footer_tails">
                    <a href="">
                      <span>在线顾问</span>
                    </a>
                  </li>
                  <li class="slice_footer_tails">
                    <a href="">
                      <span>400.8210.582</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 需要帮助 -->
              <li class="spice_need_help">
                <div class="spice_footer_title">
                  <span>需要帮助?</span>
                </div>
                <ul>
                  <li>
                    <a href="">
                      <span>联系我们</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>常见问题</span>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <!-- 右边 -->
          <div class="splice_footer_right">
            <div class="splice_footer_right_content">
              <div class="spice_form_group">
                <div class="spice_form_title">订阅GUCCI电子资讯</div>
                <div class="spice_form_content">
                  <p class="spice_form_info">
                    通过订阅，即代表您接受GUCCI的
                    <a href=""> 隐私政策条款 </a>
                  </p>
                  <div class="spice_form_input">
                    <input
                      type="text"
                      name=""
                      id=""
                      placeholder="电子邮件地址"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>

    <script src="../js/api.js"></script>
    <script>
      // 获取标签对象
      // 标题部分
      const $splice_nav = $(".splice-container");
      $splice_nav.on("mouseover", () => {
        $splice_nav.addClass("_bgactive");
      });

      $splice_nav.on("mouseout", () => {
        $splice_nav.removeClass("_bgactive");
      });
      // 鼠标滚动收起
      $(window).scroll(() => {
        // console.log();
        if ($(document).scrollTop() >= 20) {
          // console.log(1);
          $(".splice-container").removeClass("header-transparent");
          $(".splice-container").addClass("_compressed ");
        } else {
          $(".splice-container").removeClass("_compressed ");
          $(".splice-container").addClass("header-transparent");
        }
      });

      // 渲染购物车页面
      let login_name = localStorage.getItem("LOGIN_NAME");
      let html = "";
      let cart_show = async () => {
        let res = await cart({
          username: login_name,
        });
        // console.log(res);
        // 渲染
        res["list"].forEach((v, i) => {
          // console.log(v);
          html += `
              <li class="${v.cart_id}">
                  <div class="check_one">
                      <input type="checkbox" class='check_one_box'>
                  </div>
                  <div class="goods_img">
                      <img src=${v.cloths_img} alt="">
                  </div>
                  <div class="goods_info">
                      <div class="goods_info_top">
                          <h3>${v.cloths_name}</h3>
                          <p>款号# 695735XJECY9185</p>
                          <p>款式： ${v.cloths_color}</p>
                          <p>尺码： ${v.size}</p>
                      </div>
                      <div class="goods_info_sale_info">
                          <p>预售</p>
                          <p class="time">将受实际库存影响，预计5-6周左右发货</p>
                      </div>

                      <!-- 下面删除 -->
                      <div class="goods_opra">
                          <span class="change">
                              <span>编辑</span>
                          </span>
                          <span class="wash">
                              <i class="iconfont icon-aixin"></i>
                              <span>加入心愿单</span>
                          </span>
                          <span class="delete">删除</span>
                      </div>
                  </div>

              <div class="num_price">
                  <div class="num_content">
                      <div class="box_num">
                          <span class="num_sub">-</span>
                          数量
                          <input class="input_num" type="text" value="${v.num}">

                          <span class="num_add">+</span>
                      </div>
                  </div>
                  <div class="prices_content">
                      <div class="prices_box">
                          ￥<span class = "prices">${v.cloths_prices}</span>
                      </div>
                      <div class="one_total_price">
                        合计：￥
                        <span class="one_total_add">${
                          v.cloths_prices * v.num
                        }</span>
                      </div>
                  </div>
              </div>

          </li>
              `;
        });
        //   console.log(html);
        $(".goods_list").html(html);

        // 购物车操作

        // 全选
        $(".check_all_box").on("click", () => {
          $(".check_one_box").each((i, v) => {
            $(v).prop("checked", $(".check_all_box").prop("checked"));
          });
          amount();
        });

        // 反选
        $(".check_one_box").on("click", () => {
          $(".check_one_box").each((i, v) => {
            if (!$(v).prop("checked")) {
              $(".check_all_box").prop("checked", false);
              return false;
            }
            $(".check_all_box").prop("checked", true);
          });

          if ($(".check_one_box").length === 0) {
            $(".check_all_box").prop("checked", false);
          }
          amount();
        });

        // 单删
        $(".delete").each((i, v) => {
          $(v).on("click", async () => {
            console.log(9999999999999999999);
            let cart_id = $(v).parent().parent().parent().prop("class");
            let res = await del_one({
              cart_id,
            });

            if (res["status"]) {
              $(v).parent().parent().parent().remove();
            }
            amount();


          });
          if ($(".check_one_box").length === 0) {
            $(".check_all_box").prop("checked", false);
          }
          // console.log(11111111111111111);
          
        });

        // 选中删除
        $(".delete_checked").on("click", async () =>
        {
          for (let i = 0; i < $(".check_one_box").length; i++) {
            console.log($(".check_one_box").length);
            console.log($(".check_one_box")[i].checked);
            if ($(".check_one_box")[i].checked) {
              console.log(111);
              let cart_id =
                $(".check_one_box")[i].parentNode.parentNode.className;
              let res = await del_one({
                cart_id,
              });

              if (res["status"]) {
                $(".check_one_box")[i].parentNode.parentNode.remove();
                i--;
              }
            }
           
          }

          if ($(".check_one_box").length === 0) {
            $(".check_all_box").prop("checked", false);
          }
          amount();
        });

        //数量加减
        //增加
        $(".num_add").on("click", function () {
          let cart_id = $(this).parents("li").prop("class");
          let num = $(this).prev().val();
          console.log(num);
          let res = goods_adds({
            cart_id,
            num,
          });
          $(this)
            .prev()
            .val(++num);
          if (!$(this).prev().prev().html()) {
            $(this).prev().prev().html("-");
          }

          let add_price =
            $(this).parents(".num_price").find(".prices").html() *
            $(this).prev().val();
          $(this).parents(".num_price").find(".one_total_add").html(add_price);
            amount();
        });

        //减少

        $(".num_sub").on("click", async function () {
          let num = $(this).next().val();
          let cart_id = $(this).parents("li").prop("class");
          if (num > 1) {
            // console.log(1);
            let res = await goods_subs({
              cart_id,
              num,
            });

            $(this)
              .next()
              .val(--num);
            if (num === 1) {
              $(this).html("");
            }

            let add_price =
              $(this).parents(".num_price").find(".prices").html() *
              $(this).next().val();
            $(this)
              .parents(".num_price")
              .find(".one_total_add")
              .html(add_price);
          }
            amount();
        });

        // 输入数量
        $(".input_num").on("change", async function () {
          console.log(111);
          let num = $(this).val();
          let cart_id = $(this).parents("li").prop("class");
          console.log(num);
          if (num < 1) {
            $(this).val(1);
          } else {
            $(this).val(num);
          }
          let res = await goods_change({
            cart_id,
            num,
          });
          let add_price =
            $(this).parents(".num_price").find(".prices").html() *
            $(this).val();
          $(this).parents(".num_price").find(".one_total_add").html(add_price);
            amount();
        });

        //合计函数
        function amount() {
          let num = 0;
          let amouts = 0;
          $(".check_one_box").each((i, v) => {
            if ($(v).prop("checked")) {
              num += $(v).parents("li").find(".input_num").val() * 1;
              console.log($(v).parents("li").find(".one_total_add").html())*1;
              amouts += $(v).parents("li").find(".one_total_add").html() * 1;
            }
            
          });
          
          console.log(num);
          console.log(amouts);
          $(".all_nums").html(num);
          $(".goods_prices").html(amouts);
          $(".totel_prices").html(amouts);
        };
      };
      cart_show();


      let login_user = localStorage.getItem('LOGIN_NAME');
      if(login_user){
        $('.login').html('我的账户');
        // $('.login').attr('href',  "../html/login.html");
      }else{
        $('.login').attr('href',  "../html/login.html");
      }
    </script>
  </body>
</html>
